<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="form-group colored-style-boX"> <ul> <li> <input type="checkbox" id="myCheckbox01" /> <label for="myCheckbox01"> <div class="colored-boxes" style="background-color:#cd3534;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox02" /> <label for="myCheckbox02"> <div class="colored-boxes" style="background-color:#b94e9c;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox03" /> <label for="myCheckbox03"> <div class="colored-boxes" style="background-color:#cbcd2c;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox04" /> <label for="myCheckbox04"> <div class="colored-boxes" style="background-color:#f7df0d;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox05" /> <label for="myCheckbox05"> <div className="colored-boxes" style="background-color:#0e6835;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox06" /> <label for="myCheckbox06"> <div class="colored-boxes" style="background-color:#af9e34;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox07" /> <label for="myCheckbox07"> <div class="colored-boxes" style="background-color:#633513;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox08" /> <label for="myCheckbox08"> <div class="colored-boxes" style="background-color:#262827;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox09" /> <label for="myCheckbox09"> <div class="colored-boxes" style="background-color:#981a1e;"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox010" /> <label for="myCheckbox010"> <div class="colored-boxes" style="background-color:#f03c23"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox011" /> <label for="myCheckbox011"> <div class="colored-boxes" style="background-color:#f6e1ea"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox012" /> <label for="myCheckbox012"> <div class="colored-boxes" style="background-color:#d9a7cc"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox013" /> <label for="myCheckbox013"> <div class="colored-boxes" style="background-color:#f6e1ea"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox014" /> <label for="myCheckbox014"> <div class="colored-boxes" style="background-color:#f89a38"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox015" /> <label for="myCheckbox015"> <div class="colored-boxes" style="background-color:#666867"></div> <p> PP-03 </p> </label> </li> <li> <input type="checkbox" id="myCheckbox016" /> <label for="myCheckbox016"> <div class="colored-boxes" style="background-color:#be70ae"></div> <p> PP-03 </p> </label> </li> </ul> </div> </div> </div> </div>

/* CSS BY NAVEEN MANDWARIYA */ .colored-style-boX ul{ padding: 0; list-style: none; } .colored-style-boX ul li{ text-align:center; } .colored-boxes { width: 80px; height: 80px; border-radius: 11px; margin: 0 auto; } .colored-style-boX ul li p { margin: 10px 0 0; } .colored-style-boX ul li { display: inline-block; width: 11.33%; text-align: center; margin: 0 6px; } /* CSS BY NAVEEN MANDWARIYA */ .colored-style-boX input[type="checkbox"][id^="myCheckbox"] { display: none; } .colored-style-boX label { border: 1px solid #e9e5e5; padding: 10px; display: block; position: relative; margin: 10px 0; cursor: pointer; text-align: center; border-radius: 7px; } .colored-style-boX label:before { background-color: white; color: white; content: " "; display: block; border-radius: 50%; border: 1px solid grey; position: absolute; z-index: 11; top: -5px; left: -5px; width: 25px; height: 25px; text-align: center; line-height: 28px; transition-duration: 0.4s; transform: scale(0); } .colored-style-boX :checked + label { border-color: #67bd45; background-color:#ddd; } .colored-style-boX :checked + label::before { content: "✓"; background-color: green; transform: scale(1); }